import { Carousel, WingBlank } from 'antd-mobile';
import React from 'react';
import './search.css/lunbo.css'
import {getLunbo} from '../../api'
class Lunbo extends React.Component {
    state = {
      data: [],
      imgHeight: 176,
    }
    componentDidMount() {
      getLunbo().then(res=>{
        console.log(res.data.banners)
        this.setState({
          data: res.data.banners
        });
      })
     
    }
    render() {

      return (
        <WingBlank className='lunbo'>
          <Carousel
            autoplay={false}
            infinite
            beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
            afterChange={index => console.log('slide to', index)}
          >
            {this.state.data.map(({imageUrl,targetId}) => (
              <a
                key={targetId}
               
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={imageUrl}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>
        </WingBlank>
      );
    }
  }

  export default Lunbo